<template>
    <div>
         <div id="calendar">
         <!-- 标题 -->
            <div class="title_warp">
                <div class="title">
                    <div class="arrow" 
                    @click="changeMonth('pre')"
                    > ❮ </div>
                    <div class="year-month">
                        <span>{{currentYear}}年{{currentMonth}}月</span>
                    </div>

                <div class="arrow"
                @click="changeMonth('next')"
                > ❯ </div>
            </div>
         </div>
        
         <!-- 星期行 -->
         <ul class="weekdays">
             <li 
            v-for='(val,key) in weeks' :key="key" 
             >
             <!-- <span :style='chooseStyle(key)'>
                {{val}}
             </span> -->
             <span >
                {{val}}
             </span>
            </li>

         </ul>
         <!-- 日期 -->
        <ul class="days">
                <li 
                slot="reference"
             v-for='(val,key) in days' :key="key"
            
             ><span 
                :class='chooseClass(val.day)'
                 @click='clickOneDay(val,$event)'
                 >
                 {{val.day.getDate()}}</span>
                 <br/>
                 <span v-if="val.comment" class="point"></span>
                 
            </li>
        </ul>
       <div class="addEvent">
                     <p class="t">CREATE&nbsp; EVENTS</p>
                     <span>User Name</span>
                     <el-input v-model="event" size="mini" style="width:90%" type="text"></el-input>
                     <el-badge type='success' value="Holiday" class="item"></el-badge>
                     <el-badge type='success' value="Meeting" class="item"></el-badge>
                     <el-badge type='success' value="Birthday" class="item"></el-badge>
                     <div class="submitEvents">
                         <el-button type="success" size="mini" round  @click='submitEvent'>Create</el-button>
                     </div>
        </div>
        <div class="commonts_warp">
            <div class="commonts">{{commons}}</div>
        </div>
     </div>

    </div>
</template>
<script>
import $ from "jquery";
export default {
  data() {
    return {
      currentDay: 1,
      currentMonth: 1,
      currentYear: 1970,
      currentWeek: 1,
      weeks: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      days: [],
      clickCurrentDay: "",
      isShow: false,
      event: "",
      commons: ""
    };
  },
  created() {
    this.init();
  },
  methods: {
    submitEvent() {
      this.clickCurrentDay = null;
      // this.isShow = false;
      $(".addEvent").hide();
    },
    clickOneDay(d, event) {
      this.clickCurrentDay = d.day; //标准时间
      this.isShow = true;
      this.chooseClass(d.day);
      let a = $("#calendar").offset().left;
      let b = $("#calendar").offset().top;
      let offX = event.pageX - a - 220;
      let offY = event.pageY - b - 40;
      $(".addEvent").show();
      $(".addEvent").css({
        position: "absolute",
        left: offX + "px",
        top: offY + "px"
      });
      this.commons = d.comment;
    },
    init(data) {
      let day;
      if (data) {
        day = new Date(data);
      } else {
        let now = new Date();
        day = new Date(this.formDate(now.getFullYear(), now.getMonth() + 1, 1));
      }

      this.currentDay = day.getDate();
      this.currentYear = day.getFullYear();
      this.currentMonth = day.getMonth() + 1;

      this.currentWeek = day.getDay();

      if (!this.currentWeek) {
        this.currentWeek = 7;
      }

      this.days.length = 0;
      let str = this.formDate(
        this.currentYear,
        this.currentMonth,
        this.currentDay
      );

      for (let i = 2 - this.currentWeek; i < 37 - this.currentWeek; i++) {
        let d = new Date(str);
        d.setDate(i);
        
        if (i == 6) {
          this.days.push({
            day: d,
            comment:'Meeting'
          });
        }else{
          this.days.push({
          day: d,
          comment:''
        });
        }
      }
      // console.log(this.days);
      // //获取上月末至本月第一天的日期
      //   for (let i = this.currentWeek - 1; i >= 0; i--) {
      //     let d = new Date(str);
      //     d.setDate(d.getDate() - i);
      //     this.days.push({
      //       day: d
      //     });
      //   }

      // //获取剩余的日期
      //   for (let i = 1; i <= 35 - this.currentWeek; i++) {
      //     let d = new Date(str);
      //     d.setDate(d.getDate() + i);
      //     this.days.push({
      //       day: d
      //     });
      //   }
    },

    //其他月加class名'other'，今天加class名'active'
    chooseClass(day) {
      if (day.getMonth() + 1 != this.currentMonth) return "other";
      if (this.clickCurrentDay == day) {
        return "clickItem";
      }
      let a = new Date() - day;
      if (a > 0 && a < 86400000) return "active";
    },
    //改变周六日显示颜色
    // chooseStyle(key) {
    //   if (key === 5 || key === 6) return "color:#f1aaab";
    // },
    //切换月份
    changeMonth(a) {
      let d = new Date(this.formDate(this.currentYear, this.currentMonth, 1));

      // setDate(0); 上月最后一天
      // setDate(-1); 上月倒数第二天
      // setDate(n) 参数n为 上月最后一天的前后n天
      a === "pre" ? d.setDate(0) : d.setDate(35);

      this.init(this.formDate(d.getFullYear(), d.getMonth() + 1, 1));
    },
    //返回字符串个格式的日期
    formDate(year, month, day) {
      return year + "-" + month + "-" + day;
    }
  }
};
</script>
<style lang="less" scoped>
ul {
  list-style-type: none;
}

#calendar {
  width: 70%;
  // height: 400px;
  margin: 100px auto;
  border-radius: 20px;
  font-size: 20px;
  color: #fff;
  background-color: rgb(88, 180, 72);
  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
    0 1px 3px 0 rgba(0, 0, 0, 0.12);
  position: relative;
}
.title_warp {
  width: 100%;
  padding: 0 30px;
}
.title {
  font-size: 20px;
  letter-spacing: 3px;
  display: flex;
  border-radius: 20px 20px 0 0;
  justify-content: space-between;
  color: #fff;
  background-color: rgb(88, 180, 72);
  border-bottom: 1px solid #fff;
}

.title .arrow {
  padding: 20px;
  cursor: pointer;
}

.year-month {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.weekdays {
  margin: 0;
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.weekdays li {
  display: inline-block;
  width: 13.6%;
  text-align: center;
  background-color: rgb(88, 180, 72);
}

.days {
  padding: 0;
  background-color: rgb(88, 180, 72);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.commonts_warp {
  padding: 0 30px;
}
.commonts {
  width: 100%;
  border-top: 2px solid #fff;
  height: 90px;
}
.days li {
  display: inline-block;
  width: 14.2%;
  height: 70px;
  text-align: center;
  cursor: pointer;
  line-height: 30px;
  padding-top: 10px;
  position: relative;
}
.addEvent {
  z-index: 900;
  position: absolute;
  padding: 15px 25px 10px 10px;
  left: 0;
  top: 0;
  display: none;
  width: 220px;
  height: 240px;
  // background-color: #fff;
  border-radius: 15px;
  color: rgb(88, 180, 72);
  font-weight: bold;
  text-align: left;
  // box-shadow: 0 0 10px #666;
  background-image: url("../assets/images/event_create.png");
  background-position: 0% 0%;
  background-size: 100% 100%;
  .t{
    font-size: 18px;
    margin-bottom: 10px;
  }
  span {
    font-size: 16px;
    font-weight: normal;
  }
  .submitEvents {
    padding: 20px 0;
    text-align: center;
  }
}
.point {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #fff;
  position: relative;
  left:-3px;
  top:0;
}

.days li .active {
  padding: 10px 10px;
  border-radius: 50%;
  background: #fff;
  color: rgb(88, 180, 72);
}

.days li .other {
  padding: 5px;
  color: gainsboro;
}
.days li .clickItem {
  //    padding: 5px 10px;
  border-radius: 50%;
  border: 1px solid #fff;
}

.days li:hover {
  // background: #e1e1e1;
}
</style>
